<template>
  <el-dialog
    draggable
    overflow
    :title="titleMap[mode]"
    v-model="visible"
    :width="700"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <sk-tabs type="border-card">
      <el-tab-pane ref="tab" label="基本信息">
        <el-form
          :model="form"
          :rules="rules"
          ref="dialogForm"
          label-width="100px"
          label-position="right"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="分组" prop="category_id">
                <sk-select-group
                  v-model="form.category_id"
                  :list="categoryBuf"
                  @select="categoryselect"
                  :selectall="true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="膜类型"
                prop="film_category_id"
                v-show="form.category_id == 273"
                :rules="[{ required: form.category_id == 273, message: '请选择膜' }]"
              >
                <skDicSelect
                  v-model="form.film_category_id"
                  :code="'FilmCategory'"
                  :placeholder="'请选择膜'"
                >
                </skDicSelect>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="编号" prop="code">
                <el-input
                  label="编号"
                  v-model="form.code"
                  disabled
                  placeholder="自动生成"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名称" prop="fullname">
                <el-input v-model="fullname" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格" prop="spec">
                <el-input v-model="form.spec" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="简称" prop="name">
                <el-input v-model="form.name" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="对外展示" prop="show">
                <el-input v-model="form.show" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="form.material_nature_id == 3">
              <el-form-item label="功能" prop="functions">
                <el-input v-model="form.functions" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form.material_nature_id == 3">
              <el-form-item label="花型" prop="flower_pattern">
                <el-input v-model="form.flower_pattern" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="form.material_nature_id == 3">
              <el-form-item label="门幅" prop="width">
                <el-input v-model="form.width" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="form.material_nature_id != 2">
              <el-form-item label="克重" prop="weight">
                <el-input v-model="form.weight" clearable></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="采购单位">
                <skDicSelect
                  v-model="form.ounit_id"
                  :code="'unit'"
                  :placeholder="'请选择单位'"
                >
                </skDicSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="库存单位">
                <skDicSelect
                  v-model="form.uunit_id"
                  :code="'unit'"
                  :placeholder="'请选择单位'"
                >
                </skDicSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="转换系数">
                <el-input
                  v-model="form.coefficient"
                  clearable
                  placeholder="每采购单位等于多少库存单位，默认是1"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="form.category_id != 273 ? 12 : 24">
              <el-form-item label="属性">
                <el-checkbox
                  v-model="form.customer_allow"
                  label="可客供"
                  size="small"
                  :true-label="1"
                  :false-label="0"
                />
                <el-checkbox
                  v-model="form.purchase_allow"
                  label="可采购"
                  size="small"
                  :true-label="1"
                  :false-label="0"
                />
                <el-checkbox
                  v-model="form.pro_allow"
                  label="可开卡"
                  size="small"
                  :true-label="1"
                  :false-label="0"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-show="form.category_id != 273">
              <el-form-item label="型号" prop="batch">
                <el-input v-model="form.batch" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="门幅" prop="width">
                <el-input v-model="form.width" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-show="form.category_id != 273">
              <el-form-item label="成份" prop="comp">
                <el-input type="textarea" v-model="form.comp" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="膜型号"
                prop="comp"
                v-show="form.category_id == 273"
                :rules="[{ required: form.category_id == 273, message: '请选择膜类型' }]"
              >
                <skDicSelect
                  v-model="form.comp"
                  :code="'FilmType'"
                  :placeholder="'请选择膜类型'"
                >
                </skDicSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="膜类别"
                prop="batch"
                v-show="form.category_id == 273"
                :rules="[{ required: form.category_id == 273, message: '请选择膜规格' }]"
              >
                <skDicSelect
                  v-model="form.batch"
                  :code="'FilmSpec'"
                  :placeholder="'请选择膜规格'"
                >
                </skDicSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税率">
                <el-input v-model="form.tax_rate" clearable placeholder="默认是13">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="验厂名称" prop="inspectionname">
                <el-input v-model="form.inspectionname"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="form.remark" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </sk-tabs>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import skDicSelect from "@/components/skDicSelect";
import skUnitSelect from "@/components/skUnitSelect";
import skDicCheckBox from "@/components/skDicCheckBox";
import skSelectGroup from "@/components/skSelectGroup";
export default {
  emits: ["success", "closed", "update:modeValue"],
  components: { skDicCheckBox, skDicSelect, skUnitSelect, skSelectGroup },
  data() {
    return {
      mode: "add",
      diccode: "CostType",
      unit: "All",
      titleMap: {
        add: "新增物料",
        edit: "编辑物料",
      },
      form: {
        id: "",
        category_id: "",
        material_nature_id: 3,
        film_category_id: 0,
        batch: "",
        weight: 0,
        code: "",
        name: "",
        spec: "",
        comp: "",
        remark: "",
      },
      gridEvents: {
        cellDblclick: () => {
          // this.edit(row);
        },
        edit: () => {
          // this.edit();
        },
      },
      gridOps: {
        proxyConfig: null,
        columns: [
          {
            field: "material.name",
            event: {
              select: ({ e, row }) => {
                row.material = e;
              },
            },
          },
        ],
      },
      category: [],
      categoryBuf: [],

      rules: {
        name: [{ required: true, message: "请输入名称" }],
        spec: [{ required: true, message: "请输入型号规格" }],
        category_id: [{ required: true, message: "请选择分组" }],
      },
      visible: false,
      isSaveing: false,
    };
  },
  mounted() {
    this.getCateGory();
  },
  computed: {
    fullname() {
      return this.form.spec + this.form.name;
    },
  },
  watch: {
    "form.weight"() {
      if (this.form.weight > 0) {
        this.form.coefficient = (
          1000 /
          (this.form.width ?? 1.56) /
          this.form.weight /
          1000
        ).toFixed(4);
      } else {
        this.form.coefficient = 1;
      }
    },
  },
  methods: {
    //显示
    close() {
      this.visible = false;
      this.$emit("update:modeValue", false);
      this.$emit("closed");
    },
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    categoryselect(data) {
      if (data.category_id != 270) {
        this.film_category_id = null;
      }
      this.form.material_nature_id = data.material_nature_id;
    },
    async getCateGory(query = "全部物料") {
      if (this.category == "") {
        this.category = await this.$API.basedata.material.category.list.get();
      }
      this.categoryBuf = this.category.data.filter(item => {
        return item.name.toLowerCase().includes(query.toLowerCase());
      });
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          this.isSaveing = true;
          this.form.fullname = this.fullname;
          var res = await this.$API.basedata.material.save.post(this.form);
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          } else {
            this.$alert(res.message, "提示", { type: "error" });
          }
        }
      });
    },

    //表单注入数据
    setData(data) {
      this.form = Object.assign(this.form, data);
      this.form.costType = data.dic_cost_type?.key;
    },
  },
};
</script>

<style></style>
